<template>
  <!-- 我的页面 -->
  <view class="myself">
    <view class="myself-wrapper">
      <view class="myself-content myself-card" style="margin-top: 220rpx">
        <view class="myself-head" data-url="">
          <view class="avatar" @click=" pvwImage([avatarImg])">
            <image class="headImg" :src="avatarImg"></image>
          </view>
          <view>
            <view class="areaName" v-if="role === 'mini'">
              <text v-if="personInfo.realNameAuthentication == 1">
                {{personInfo.realName || personInfo.userName}}
              </text>
              <text v-else data-="" @click="handleClickRouter">去实名认证</text>
            </view>
            <view class="areaName" v-else @click="handleClickRouter">
              {{ personInfo.realName || personInfo.userName || "请登录" }}
            </view>
          </view>
        </view>
      </view>
      <view class="myself-content myself-card" style="margin-top: 2vh">
        <view class="person-con" v-for="item in menuListComputed" :key="item.id" :data-url="item.url"
          @click="personHandle($event, item)">
          <view>
            <image :src="item.iconName" style="margin-bottom: -4rpx; width: 32rpx; height: 32rpx"></image>
            <text style="padding-left: 2vh">{{ item.name }}</text>
          </view>
          <view>
            <u-icon name="arrow-right" style="color: #9e9e9e"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <custom-tab-bar :tabBarIndex="2" ref="tabRef" :badge="unreadMessageCount" />
  </view>
</template>

<script>
  import {
    logout
  } from "@/api/api.js";
  import {
    whetherLogin,
    Toast,
    handleClickRouter,
    pvwImage
  } from "@/utils/util.js";
  import {
    mapState
  } from 'vuex'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync('imgPrefix'),
        token: "",
        personInfo: {},
        role: uni.getStorageSync("role") || 'mini',
        menuList: [{
            id: 2,
            iconName: `${this.$baseImgUrl}self_icon4.png`,
            name: "责任书管理",
            role: ['mini'],
            url: "/selfInfo/liabilityStatement/liabilityStatement",
          },
          {
            id: 3,
            iconName: `${this.$baseImgUrl}self_icon2.png`,
            name: "个人信息",
            role: ['fj', 'wgy'],
            url: "/selfInfo/personalDetails/personalDetails",
          },
          {
            id: 4,
            iconName: `${this.$baseImgUrl}self_icon5.png`,
            name: "实名认证",
            role: ['mini'],
            url: "/selfInfo/personalDetails/realNameInfo",
          },
          {
            id: 6,
            iconName: `${this.$baseImgUrl}self_icon3.png`,
            name: "修改密码",
            role: ['fj', 'wgy'],
            url: "/selfInfo/changePassword/changePassword",
          },
          {
            id: 10,
            iconName: `${this.$baseImgUrl}feedback-icon.png`,
            name: "意见反馈",
            url: "/feedback/index",
            role: ['mini', 'fj', 'wgy'],
          },
          {
            id: 5,
            iconName: `${this.$baseImgUrl}self_icon3.png`,
            name: "退出登录",
            url: "",
            role: ['mini', 'fj', 'wgy'],
          },
        ],
        num: 0,
      };
    },
    computed: {
      avatarImg() {
        if (this.role === 'mini') {
          return this.personInfo.avateor ?
            this.personInfo.avateor :
            this.baseImgUrl + 'queryFace-01.png'
        } else {
          return this.personInfo.userImage ?
            this.imgPrefix + this.personInfo.userImage :
            this.imgPrefix + 'queryFace-01.png'
        }
      },
      menuListComputed() {
        return this.menuList.filter((item) => {
          if (item.id === 4) {
            return item.role.includes(this.role) && this.personInfo.realNameAuthentication == 1
          } else {
            return item.role.includes(this.role)
          }
        });
      },
      ...mapState(['unreadMessageCount'])
    },
    created() {},
    onShow() {
      this.num += 1;
      this.personInfo = {};
      this.token = uni.getStorageSync("X-MINI-TOKEN");

      if (!this.token) {
        if (this.num <= 1) {
          this.menuList.pop();
        }
        return;
      }

      this.getList();
    },
    methods: {
      handleClickRouter,
      pvwImage,
      userListHandle(e) {
        let url = e.currentTarget.dataset.url;
        uni.navigateTo({
          url,
        });
      },
      personHandle(e, item) {
        if (!this.token) {
          whetherLogin();
          return;
        }

        if (item.id == 5) {
          uni.showModal({
            title: "提示",
            content: "是否退出登录？",
            success(res) {
              if (res.confirm) {
                uni.clearStorageSync();
                uni.reLaunch({
                  url: "/pages/beforeLogin/beforeLogin",
                });
                //   logout().then((res) => {
                //     if (res.code == 200) {
                //       Toast("退出登录成功");
                //       setTimeout(() => {
                //         uni.clearStorageSync();
                //         uni.reLaunch({
                //           url: "/pages/beforeLogin/beforeLogin",
                //         });
                //       }, 1000);
                //     }
                //   });
              }
            },
          });
        }

        let url = e.currentTarget.dataset.url;
        uni.navigateTo({
          url,
        });
      },
      getList() {
        this.personInfo = uni.getStorageSync("user");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .myself {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .myself-wrapper {
      flex: 1;
      position: relative;
      background: url($baseImgUrl + "bg.png") no-repeat;
      background-size: 100% 24vh;
      background-color: #f1f1f1;

      .myself-content {
        position: relative;
        margin: 0 auto;
        padding: 2vh 4vh;
        border-radius: 20rpx;
        width: 710rpx;

        .myself-head {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #fff;

          .areaName {
            position: relative;
            margin-bottom: 2vh;
            font-size: 36rpx;
            font-weight: 500;
            color: #000000;
          }
        }
      }

      .myself-card {
        background: #fff;
        font-size: 30rpx;

        .person-con {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.7vh 0;
          border-bottom: 1px solid #f3f3f3;

          .u-iconfont {
            margin-right: 1vh;
          }
        }
      }
    }

    .popup-status {
      padding: 0 5vh;
      height: 100%;

      .popup-select {
        display: flex;
        justify-content: space-between;
        padding: 3vh 0;
        border-bottom: 1px solid #f1f1f1;

        .popup-title {
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      .popup-radio {
        color: #7c7c7c;
        padding: 2vh 0;
        border-bottom: 1px solid #f1f1f1;
      }
    }

    .avatar {
      margin-right: 1.5vh;
      border-radius: 130rpx;
      overflow: hidden;
      width: 130rpx;
      height: 130rpx;

      .headImg {
        border-radius: 50%;
        overflow: hidden;
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
</style>